<template>
	<view class="white_bg">

		<!-- 状态栏 -->
		<view class="status_bar"></view>

		<!-- 导航栏 -->
		 <u-navbar :autoBack="true" :bgColor="navbarStyle">
			 <view slot="left" style="display: flex;">
			 	<u-icon name="arrow-left" class="u-navbar__content__left" size="20" :color="navbarIocnColor"></u-icon>
			 	<u-avatar v-if="showNavbar" size="28" :src="userInfo.avatar"></u-avatar>
			 	<view v-if="showNavbar" class="u-navbar__content__title navbar_title">{{userInfo.displayName}}</view>
			 </view>
			 <view slot="right" style="float: left;margin-right: 10px;"   @tap="$u.toast('插槽被点击')" >
				<u-icon name="search" size="30" :color="navbarIocnColor"></u-icon>
			</view>
		</u-navbar>


		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="upOption">

			<!-- banner内容  -->
			<view id="banner_content">
				<!-- 背景图 -->
				<view class="background_box_img" :style="'background-image: url('+'/static/bg/bg_t.jpg'+');'">
				</view>

				<!-- 用户信息	 -->
				<view class="user_info_box">
					<view class="user_head_box">
						<!-- 头像 -->
						<view class="user_avatar">
							<u-avatar :src="userInfo.avatar" size="80" mode="aspectFill"></u-avatar>
						</view>

						<!-- 是否已关注 -->
						<view class="user_head_right" v-if="!isCurrentUser" @click.stop="followClick()">
							
							<u-button v-if="userInfo.followed === true" plain shape='circle' size="mini"   text="已关注">
							</u-button>
							<u-button v-if="userInfo.followed === false"  plain shape='circle' size="mini" type="primary" text="+ 关注">
							</u-button>
<!-- 
							<u-button shape="circle" size="small" text="已关注" color="#cacaca" @click="gotoEdit()">
							</u-button> -->
						</view>
					</view>


					<view class="user_info">
						<!-- 昵称 -->
						<view class="user_nick_info">
							<text class="user_nick">{{userInfo.displayName}}</text>
							<image v-if="userInfo.sex == 1" class="gender_icon"  src="/static/icon/gender_m.png"></image>
							<image v-if="userInfo.sex == 0" class="gender_icon"  src="/static/icon/gender_w.png"></image>
						</view>

						<view class="user_signature">
							{{userInfo.introduction}}
						</view>


						<u-collapse :border="false" style="padding-top: 14px;">
							<u-collapse-item :clickable="false" :border="false" :isLink="true">
								<view  slot="title" class="user_tags">
									<view class="tag_item">
										<text class="tag_num">{{userInfo.likeCount||0}}</text>
										<text class="tag_txt">获赞</text>
									</view>
									<view class="tag_item">
										<text class="tag_num">{{userInfo.followCount||0}}</text>
										<text class="tag_txt">关注</text>
									</view>
									<view class="tag_item">
										<text class="tag_num">{{userInfo.fansCount||0}}</text>
										<text class="tag_txt">粉丝</text>
									</view>
								</view>


								<view class="brithday" v-if="userInfo.constellation || userInfo.birthday">
									<view style="width: 15px;"></view>
									<view class="brithday_view" v-if="userInfo.birthday">
										<image class="brithday_icon"  src="/static/icon/user_center/icon_birthday.png"></image>
										<view class="brithday_txt">{{userInfo.birthday}}</view>
									</view>

									<view class="brithday_view" v-if="userInfo.constellation">
										<image class="brithday_icon"  src="/static/icon/user_center/icon_constellation.png"></image>
										<view class="brithday_txt2">{{userInfo.constellation}}</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>





					</view>
				</view>
			</view>

			<!-- 吸顶悬浮菜单 -->
			<u-sticky bgColor="#fff"  style="width: 750upx;background-color: #FFFFFF;border: ;">
				<view class="border_class"></view>
				<u-tabs :current="currentTab" :list="tabsList" @click="tabsClick" :scrollable="false"></u-tabs>
				<view class="border_class"></view>
			</u-sticky>



			<!-- 数据列表 -->
			<swiper :style="{height: wHeight+'px'}" :current="currentTab" @change="swiperChange">

				<swiper-item>
					<home-page-list ref="pageListR"   :height="wHeight" :username="userInfo.username"
						:disable-scroll="disableScroll" @video_play="videoPlayBack">
					</home-page-list>
				</swiper-item>

				<swiper-item>
					<artcleList ref="articleListR" :height="wHeight" :username="userInfo.username"
						:disable-scroll="disableScroll" @video_play="videoPlayBack">
					</artcleList>
				</swiper-item>

				<swiper-item>
					<home-page-reply ref="replyListR" :height="wHeight" :username="userInfo.username"
						:disable-scroll="disableScroll" @video_play="videoPlayBack">
					</home-page-reply>
				</swiper-item>

			</swiper>
		</mescroll-body>

		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 视频播放 -->
		<video-play ref="play"></video-play>



	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import ArtcleList from './cpns/homePageArticle.vue'
	import HomePageList from './cpns/homePageList.vue'
	import HomePageReply from  "./cpns/homePageReply.vue";
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		components: {
			HomePageList,
			ArtcleList,
			HomePageReply,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 导航栏样式
				navbarStyle: 'rgba(255, 255, 255, 0)', //白色,
				navbarIocnColor: '',
				// 显示导航栏内容
				showNavbar: false,
				// banner的高度
				bannerHeight: 388,
				// 页面高度
				wHeight: 600,
				upOption: {
					// 是否启用
					use: false
				},
				// 用户信息
				userInfo:{
					username: ''
				},
				// swiper列表是否禁止滚动
				disableScroll: true,
				// 当前菜单索引
				currentTab: 0,
				tabsList: [{name: '主页'}, {name: '帖子'}, {name: '评论'}],
				// 提交中
				doing: false

			}
		},
		watch: {
			currentTab(i) {
				// 当列表禁止滚动时,需把列表滚动条置顶
				if (this.disableScroll) {
					// 当disableScroll=true时,scroll-view的scrollTo会失效,需先开启,再置顶
					this.disableScroll = false
					this.$nextTick(() => {
						let mescrollCpn = this.getSwiperItemScroll(i)
						if(mescrollCpn){
							let mescroll = mescrollCpn.mescroll
							mescroll && mescroll.scrollTo(0, 0)
						}
						setTimeout(() => {
							// 经测试android真机需延时300ms才能恢复禁止滚动,否则scrollTo有可能无效
							this.disableScroll = true
						}, 300)
					})
				}
			}
		},
		computed: {
			getUsername() {
				let u = this.$store.state.user
				return u&&u.info?u.info.username:null
			},
			isCurrentUser(){
				let u = this.$store.state.user
				if(!u || !u.info || !u.info.username){
					return false
				}
				return this.data.poster.username == u.info.username
			}
		},
		created() {
			// 获取页面高度
			this.wHeight = uni.getSystemInfoSync().windowHeight
		},
		onLoad(option) {
			this.userInfo.username = option.id
			if(!option.id){
				uni.navigateBack()
			}
			if (this.getUsername == option.id){
				uni.redirectTo({
					url: '/pages/center/userHomePage'
				});
				return
			}
			// 获取banner的高度
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select("#banner_content").boundingClientRect(data => {
					this.bannerHeight = data.height
				}).exec()
			})
			this.getUerInfo()
			this.initPage()
		},
		methods: {
			initPage(){
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll(this.currentTab)
					if (ref){
						ref.initData()
					}
				})
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			// 页面的滚动事件
			onPageScroll(e) {
				this.disableScroll = Math.ceil(e.scrollTop) < this.bannerHeight
				let scrollNum = e.scrollTop
				let b30 = this.bannerHeight / 3
				let b10 = this.bannerHeight / 10
				//透明度慢慢变白
				if (Math.abs(scrollNum) <= b10) {
					this.navbarStyle = "rgba(255, 255, 255, 0)";
					this.navbarIocnColor = "#fff"
					this.showNavbar = false;
				} else if (Math.abs(scrollNum) > b10 && Math.abs(scrollNum) <= b30) {
					let rate = (Math.abs(scrollNum)) / b30;
					this.navbarStyle = "rgba(255, 255, 255, " + rate + ")";
					this.showNavbar = true
					this.navbarIocnColor = "#fff"
				} else if (Math.abs(scrollNum) > b30) {
					this.navbarStyle = "rgba(255, 255, 255, 1)";
					this.showNavbar = true;
					this.navbarIocnColor = ""
				}
			},
			// swiper切换
			swiperChange(e) {
				this.currentTab = e.detail.current
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll(this.currentTab)
					if (ref){
						ref.initData()
					}

				})
			},
			// tabs点击事件
			tabsClick(e) {
				this.currentTab = e.index
				this.$nextTick(()=>{
					let ref = this.getSwiperItemScroll(this.currentTab)
					if (ref){
						ref.initData()
					}

				})
			},
			// 获取用户信息
			async getUerInfo(){
				// 基本信息
				await this.$httpApi.baseUserGet('open/user/getUserInfo/'+this.userInfo.username,{}).then(({ data }) => {
					if (data.code == "000000") {
						this.userInfo =  data.data
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => { })
				
				this.getFollowCoun()
				
			},
			// 关注和粉丝数
			getFollowCoun(){
				this.$httpApi.baseUserGet('follow/follow_and_fans_count/'+this.userInfo.username).then(({ data }) => {
					if (data.code == "000000") {
						if(data.data){
							this.userInfo.likeCount = data.data.like
							this.userInfo.followCount = data.data.follow
							this.userInfo.fansCount = data.data.fans	
						}
					}
				})
			},
			// 关注点击事件
			followClick(){
				if(this.userInfo.followed === true){
					this.cancelFollow()
				} else if(this.data.poster.followed === false){
					this.doFollow()
				}
			},
			doFollow(){
				if(this.doing){
					return false
				}
				this.doing = true
				this.$httpApi.baseUserPost('follow/'+this.userInfo.username,{}).then(({ data }) => {
					if (data.code == "000000" && data.data === 1) {
						this.userInfo.followed = true				
					}
					this.doing = false
				}).catch(err => {
					this.doing = false
				})
			},
			cancelFollow(){
				if(this.doing){
					return false
				}
				this.doing = true
				this.$httpApi.baseUserDelete('follow/'+this.userInfo.username,{}).then(({ data }) => {
					if (data.code == "000000" && data.data === 1) {
						this.userInfo.followed = true				
					}
					this.doing = false
				}).catch(err => {
					this.doing = false
				})
			},
			// 获取指定下标的ref对象
			getSwiperItemScroll(i){
				let refName = null
				if(this.currentTab == 0){
					refName = 'pageListR'
				}else if(this.currentTab == 1){
					refName = 'articleListR'
				}else if(this.currentTab == 2){
					refName = 'replyListR'
				}
				if(!refName){
					return null
				}
				return this.$refs[refName];

			},


		}
	}
</script>

<style lang="scss">
	
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 4px !important;
	}

	::v-deep .u-navbar__content__left {
		padding: 0 13px 0 3px !important;
	}
	::v-deep .u-navbar__content__title {
		text-align: left !important;
	}
	::v-deep .u-cell--clickable{
		background-color: #fff;
	}
	.navbar_title{
		margin-left: 1px;
		width: 450rpx;
		line-height: 28px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	//背景
	.background_box_img {
		width: 750upx;
		height: 280px;
		transition-timing-function: ease;
		transition-duration: 0.1s;
		transition-property: transform;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.user_info_box {
		margin-top: -80px;
		padding: 0 15px;
		padding-bottom: 8px;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}

	// 头像与右侧按钮
	.user_head_box {
		display: flex;
	}

	// 头像
	.user_avatar {
		flex-direction: row;
		margin-left: 10px;
		margin-top: -35px;
		flex: 1;
	}

	// 右侧按钮
	.user_head_right {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		display: flex;
	}


	.user_nick_info {
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		margin-top: 5px;
		line-height: 25px;
		height: 25px;
	}

	.gender_icon{
		width: 20px;
		height: 20px;
	}

	.user_vip_img {
		width: 20px;
		height: 20px;
		margin: 0 2px;
		align-items: center;
	}

	.user_nick {
		font-size: 19px;
		font-weight: 500;
	}

	.user_signature {
		color: #565656;
		margin-top: 10px;
		font-size: 13px;
		font-weight: 500;
		margin-bottom: -5px;
	}

	.user_tags {
		display: flex;
		flex-direction: row;
		margin-left: -15px;
	}

	.tag_item {
		flex-direction: row;
		margin-right: 15px;
		align-items: center;
	}

	.tag_num {
		font-size: 18px;
		font-weight: 700;
		align-items: center;
		color: #2b2b2b;
		margin-right: 5px;
	}

	.tag_txt {
		font-size: 13px;
		color: #565656;
	}

	.brithday {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: -12px -15px;
	}
	.brithday_view{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 75px;
		padding: 5px 10px;
		margin-left: -15px;
		background-color: #f1f1f1;
		border-radius: 20px;
		border-width: 1px;
		border-color: #cacaca;
	}
	.brithday_icon {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}
	.brithday_txt {
		max-width: 60px;
		line-height: 15px;
		font-size: 9px;
		color: #565656;
	}

	.brithday_txt2 {
		width: 40px;
		line-height: 15px;
		font-size: 9px;
		color: #565656;
	}
	
	.border_class{
		height: 4px;
		background-color: #efefef;
		width: 100%;
	}

</style>
